<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Vue</title>
		<!-- 引入样式 -->
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="css/customer.css">
		<!-- 引入组件库 -->
		<script src="js/jquery-1.11.1.min.js"></script>
		<script src="js/vue.v2.6.14.js%20.js"></script>
		<script src="js/index.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 顶部导航 -->
			<el-row>
			  <el-col :span="24">
				  <el-menu
				    :default-active="activeIndex2"
				    class="el-menu-demo topNav"
				    mode="horizontal"
				    background-color="#545c64"
				    text-color="#fff"
				    active-text-color="#ffd04b">
				    <el-menu-item index="1" class="navTile"><h1>Blog 博客管理后台系统</h1></el-menu-item>
				    
					<el-submenu index="2" style="float: right;">
				      <template slot="title"><img class="logo" src="images/bg4.jpg"/><span class="username">${sessionScope.user.name}</span></template>
				      <el-menu-item index="2-1">修改信息</el-menu-item>
				      <el-menu-item index="2-2">
						  <a href="login.html">退出</a>
					  </el-menu-item>
				    </el-submenu>
					
				    <el-menu-item index="3" style="float: right;">消息中心</el-menu-item>
				  </el-menu>
			  </el-col>
			</el-row>
			<!-- 主体 -->
			<el-row>
			  <!-- 左边导航 -->
			  <el-col :span="4">
				  <el-menu
				        default-active="2"
				        class="el-menu-vertical-demo leftNav"
				        background-color="#545c64"
				        text-color="#fff"
				        active-text-color="#ffd04b">
				        <a href="home.html" target="show">
							<el-menu-item index="2">
							  <i class="el-icon-menu"></i>
							  <span slot="title">首页</span> 
							</el-menu-item>
						</a>
						<a href="list-blog.html" target="show">
							<el-menu-item index="3">
							  <i class="el-icon-document"></i>
							  <span slot="title">博客管理</span>
							</el-menu-item>
						</a>
						<a href="list-bigType.html" target="show">
							<el-menu-item index="4">
							  <i class="el-icon-setting"></i>
							  <span slot="title">类别管理</span>
							</el-menu-item>
						</a>
						<a href="list-user.html" target="show">
							<el-menu-item index="5" target="show">
							  <i class="el-icon-s-custom"></i>
							  <span slot="title">用户管理</span>
							</el-menu-item>
						</a>
				      </el-menu>
			  </el-col>
			  <!-- 右边内容 -->
			  <el-col :span="20">
				  <iframe id="main" name="show" src="home.html"></iframe>
			  </el-col>
			</el-row>
		</div>
	</body>
	
	<script>
		// 创建根实例
		new Vue({
			el: '#app',
			data: {
				activeIndex2: '1'
			}
		})
	</script>
	
	<script>
		$(document).ready(function(){
			setClientHeight();
			function setClientHeight(){
				let clientHeight=$(window).height()-66;
				$(".leftNav").css("height",clientHeight+"px");
				$("#main").css("height",clientHeight-20+"px");
			}
			$(window).resize(function() {
				setClientHeight();
			});
		});
	</script>
</html>
